<template>
    <div class="layout">
        <div class="top">
            <div class="title">
                <span>详细数据</span>
                <el-tooltip effect="dark" placement="top-start">
                    <template #content>
                        <div class="channel-code-stat-tooltip-content">
                            <p>注意：</p>
                            <p v-for="item in overview" :key="item">{{ item }}</p>
                        </div>
                    </template>
                    <el-icon class="box-icon">
                        <QuestionFilled />
                    </el-icon>
                </el-tooltip>
            </div>
            <el-button :disabled="infoData.length == 0" @click="exportData">导出</el-button>
        </div>
        <div class="tableBox">
            <el-table
                v-if="infoData.length > 0"
                :data="infoData"
                stripe
                :default-sort="{ prop: 'get_cust_qty', order: 'descending' }"
                @sort-change="sortChange">
                <el-table-column prop="work_user_name" label="员工">
                    <template #default="{ row }">
                        <div>
                            <span>{{ row.work_user_name }}</span>
                            <span v-if="row.is_histoy_user === 2">（历史员工）</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="get_cust_qty" sortable="custom">
                    <template #header>
                        <el-tooltip effect="dark" placement="top">
                            <template #content>
                                <div class="channel-code-stat-table-tooltip">
                                    通过该渠道活码添加的企微客户数（去重），包含该渠道流失的客户
                                </div>
                            </template>
                            <span>获客数</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="loss_cust_qty" sortable="custom" width="">
                    <template #header>
                        <el-tooltip effect="dark" placement="top">
                            <template #content>
                                <div class="channel-code-stat-table-tooltip">
                                    通过该渠道活码添加的企微客户又删除了该活动所有引流员工（包括历史去除的员工）的客户数（去重），注：此处删除的定义是指客户删员工或员工删客户，或者两者互删
                                </div>
                            </template>
                            <span>流失客户数</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="retain_cust_qty" sortable="custom" width="">
                    <template #header>
                        <el-tooltip effect="dark" content="获客数-流失客户数" placement="top">
                            <span>留存客户数</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="add_friend_qty" sortable="custom" width="">
                    <template #header>
                        <el-tooltip effect="dark" placement="top">
                            <template #content>
                                <div class="channel-code-stat-table-tooltip">
                                    通过该渠道活码添加的好友数（不去重），包含其中删除员工的好友
                                </div>
                            </template>
                            <span>添加好友数</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="del_friend_qty" sortable="custom" width="">
                    <template #header>
                        <el-tooltip effect="dark" placement="top">
                            <template #content>
                                <div class="channel-code-stat-table-tooltip">
                                    通过该渠道活码添加的好友又删除了该活码引流员工的好友数（不去重）
                                </div>
                            </template>
                            <span>删除好友数</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="retain_friend_qty" sortable="custom" width="">
                    <template #header>
                        <el-tooltip effect="dark" content="添加好友数-删除好友数" placement="top">
                            <span>留存好友数</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="infoData.length == 0" class="no_data">
            <img class="no_img" src="@/assets/noData.png" alt="" />
            <div class="no_title">暂无数据</div>
        </div>
    </div>
</template>

<script lang="ts" setup>
defineProps(['infoData', 'dataInfos']);

const emit = defineEmits({
    exportData: null,
    SortData: null
});

const overview = [
    '该详细数据提供了该渠道活码设置过的所有引流员工（包括编辑活码时移除的历史员工-有引流数据）的统计数据。',
    '请注意：对于一些去重的指标（如：获客数、流失客户数、留存客户数），各个员工对应的指标值相加和整体指标值不相等的。',
    '数据统计至昨日23:59:59'
];

const exportData = e => {
    emit('exportData', e);
};
// 1-获客数(默认) 2-流失客户数 3-留存客户数 4-添加好友数 5-删除好友数 6-留存
const sortType = {
    get_cust_qty: 1,
    loss_cust_qty: 2,
    retain_cust_qty: 3,
    add_friend_qty: 4,
    del_friend_qty: 5,
    retain_friend_qty: 6
};
//升降序排列
const sortChange = (obj: any) => {
    const params = {
        order: sortType[obj.prop],
        sort: 1
    };
    params.sort = obj.order === 'ascending' ? 2 : 1;
    emit('SortData', params);
};
</script>
<style lang="scss" scoped>
.layout {
    background-color: #fff;

    .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 24px;
        border-bottom: 1px solid #eaeaea;
        margin-bottom: 20px;

        .title {
            display: flex;
            align-items: center;

            :deep(.box-icon) {
                text-align: center;
                font-size: 16px;
                margin-left: 4px;
                color: #ccc;
                background: #fff;
            }
        }

        .btn {
            line-height: 36px;
            padding: 0 18px;
            border-radius: 4px;
            border: 1px solid #eaeaea;
            cursor: pointer;
        }
    }

    .detail {
        &_btn {
            display: inline-block;
            padding: 5px 16px;
            border: 1px solid #eaeaea;
        }
    }

    .tableBox {
        padding: 0 24px;
    }

    .no_data {
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .no_img {
            margin-left: 24px;
        }

        .no_title {
            color: #909399;
            font-size: 14px;
        }
    }
}

.channel-code-stat-tooltip-content {
    width: 542px;
}

.channel-code-stat-table-tooltip {
    width: 300px;
}
</style>
